/* This contains all of your theme.*/
/* If somebody wants to extend the theme she will include this mixin. */
@import "mixins.scss";
@import "fonts.scss";
@import "colors.scss";
@import "vaadin-components.scss";

/* Import our component styles */
@import "components/attachment-preview.scss";
@import "components/attachments-display.scss";
@import "components/attachment-upload.scss";
@import "components/project/dashboard.scss";
@import "components/project/activities.scss";
@import "components/project/bug.scss";
@import "components/project/message.scss";
@import "components/project/task.scss";
@import "components/project/member.scss";
@import "components/project/milestone.scss";
@import "components/project/timelog.scss";

@mixin mycollab-mobile {
    /* Include all the styles from the reindeer theme */
    
    @include vaadin-components;
    
    /* Include common components */
    @include attachment-preview;
    @include attachments-display;
    @include attachment-upload;
    
    * {
	   -webkit-tap-highlight-color: rgba(0,0,0,0);
	   -webkit-tap-highlight-color: transparent; /* For some Androids */
	}
    
    .v-table-body {
    	border: none;
    }
    
    .v-mobilecomponent .v-touchkit-navpanel {
    	box-shadow: none;
    }

    .content-wrapper {
        margin: 0 auto;
        display: block;
        &.v-margin-top {
        	padding-top: 2.5rem;
        }

        .intro-text {
            text-align: center;
        }

        .welcometext-wrapper {
            background: url("icons/welcometext_bg.png") repeat-x left center rgb(245, 245, 245);

            .v-label {
                display: block;
                margin: 0 auto;
                text-align: center;
                background-color: rgb(245, 245, 245);
                font-size: 1.6rem;
                color: #2692db;
                border: none;
            }
        }
    }

    .login-view {
        overflow: auto;

        .v-textfield {
            padding: 10px 5px 10px 55px;
            font-size: 1.5rem;
            color: rgb(34, 34, 34);
        }

        .v-textfield.v-textfield-prompt {
            color: #c7c7c7;
        }

        .v-textfield.email-input {
            background: url("icons/email_input_bg.png") no-repeat left center #FFFFFF;
        }

        .v-textfield.password-input {
            background: url("icons/password_input_bg.png") no-repeat left center #FFFFFF;
        }
    }

    .main-view {
        overflow: auto;
        background: none repeat scroll 0% 0% rgb(245, 245, 242);

        .module-button {
            border: 1px solid #bdbdbd;
            border-radius: 4px;
            cursor: pointer;
            padding: 25px 5px 25px 90px;
            background-color: #ffffff;
            background-repeat: no-repeat;
            background-position: left center;
            color: #727272;
            font-size: 16px;
            font-weight: bold;
        }

        .module-button:focus, .module-button:active {
            box-shadow: 0px 0px 4px #49a3e1;
        }

        .module-button.crm {
            background-image: url("icons/crm_icon.png");
        }
        .module-button.project {
            background-image: url("icons/pm_icon.png");
        }
        .module-button.document {
            background-image: url("icons/document_icon.png");
        }
    }
    
    /* Navigation styles */
    
    .v-touchkit-navpanel-navigation {
    	background: none no-repeat scroll 0px 0px rgb(33, 37, 41);
    	
    	.navigation-menu {
    		overflow-y: auto;
    		
    		.v-button {
	    		margin: 0px;
	    		text-align: left;
	    		background: none no-repeat 0 0 transparent;
	    		font-size: 1.4rem;
	    	}
	    	
	    	.user-info-panel {
	    		background: none no-repeat 0 0 rgb(239, 239, 239);
	    		border-bottom: 1px solid rgb(226, 226, 226);
	    		
	    		.v-button-wrap {
	    			padding: 0px 6px;
	    		}
	    	}
	    	
	    	.user-info-panel.v-margin-top {
	    		padding-top: 6px;
	    	}
	    	
	    	.user-info-panel.v-margin-bottom {
	    		padding-bottom: 6px;
	    	}
	    	    	
	    	.v-button.nav-btn {
	    		background: none no-repeat scroll 0px 0px rgb(33, 37, 41);
	    		border-bottom: 0.1rem solid rgb(60, 66, 73);
	    		border-radius: 0px;
	    		-webkit-tap-highlight-color: transparent;
	    		
	    		.v-button-wrap {
	    			padding: 6px 12px;
	    			
	    			.v-button-caption {
	    				vertical-align: middle;
	    				color: rgb(130, 130, 130);
	    				display: inline-block;
	    				font-weight: bold;
	    			}
	    		}
	    		.nav-btn-icon {
	    			font-size: 20px;
	    			vertical-align: middle;
	    			color: rgb(130, 130, 130);
	    			padding-right: 10px;
	    		}
	    	}
	    	
	    	.v-button.nav-btn.isSelected {
	    	
	    		.v-button-caption {
	    			color: rgb(0, 163, 232);
	    			position: relative;
	    			z-index: 1;
	    			
	    			.nav-btn-icon {
	    				color: rgb(0, 163, 232);
	    			}
	    		}
	    	}
    	}
    }
    
    /* Main Panel Styles */
    .v-touchkit-navpanel-wrapper {
		-webkit-tap-highlight-color: transparent;
		
		.v-touchkit-tabbar-toolbar {
			@include toolbar;
			height: 4.8rem;
			
			.v-touchkit-toolbar {
				height: 100%;
				display: inline-block;
				position: relative;
				box-shadow: none;
				border-top: none;
				white-space: nowrap;
				
				.v-button {
				    display: inline-block;
				    vertical-align: middle;
				    position: relative;
				    height: 100%;
				    border-left: none;
				    
				    .v-button-wrap {
				    	display: inline-block;
						vertical-align: middle;
						position: relative;
						height: auto;
						padding: 0px 10px;
						
						.v-button-caption {
							position: relative;
							bottom: 0px;
						}
				    }
					&:before {
						content: "";
						display: inline-block;
						height: 100%;
						vertical-align: middle;
						width: 0px;
					}
				}				
			}
		}
				
	    .mobilenavview {
	    	&.disabled {
	    		.v-touchkit-navbar {
	    			background-color: $low-priority;
	    		}
	    	}	
	    	.v-touchkit-navbar {
	    		.toggle-nav-btn {
	    			background: none;
	    			@include icomoon;
	    			
	    			&:before {
	    				content: "\e120";
	    				line-height: 4rem;
	    				font-size: 2rem;
	    			}
	    		} 
	    		.v-touchkit-navbar-left {		    		
		   			.v-touchkit-navbutton-back {
		   				position: relative;
		   				background: $primary-blue; 
		   				border: 1px solid $blue-border; 
		   				color: rgb(255, 255, 255);
		   				overflow: visible;
		   				height: 2.8rem;
		   				min-height: 2.8rem;
		   				margin-top: 0.6rem;
		   				padding: 0rem 0.8rem 0rem 0.4rem;
		   				font-size: 1.3rem;
		   				margin-left: 2rem;
		   				line-height: 2.5rem;
		   				
		   				&:after {
		   					@include backbtn;
		   					
			   				border-color: rgba(73, 163, 225, 0); 
			   				border-right-color: $primary-blue; 
			   				border-width: 13px; 
			   				margin-top: -13px;
			   				left: auto;
			   				margin-right: 0px;
			   			}
			   			&:before {
			   				@include backbtn;
			   				
			   				border-color: rgba(36, 130, 194, 0);
			   				border-right-color: $blue-border; 
			   				border-width: 14px; 
			   				margin-top: -14px; 
			   			}
		   			}
		    	}
		    	
		    	.v-touchkit-navbar-caption {
	    			line-height: 4rem;
	    			height: 4rem;
	    			position: absolute;
	    			text-align: center;
	    			font-size: 1.6rem;
	    			color: rgb(255, 255, 255);
	    			span {
	    				width: 100%;
		    			white-space: nowrap;
		    			text-overflow: ellipsis;
		    			display: block;
		    			position: relative;
		    			overflow: hidden;
	    			}	    			
	    		}
	    		
	    		.v-touchkit-navbar-right {
	    			.edit-btn, .save-btn {
	    				border: 1px solid $blue-border; 
		   				color: rgb(255, 255, 255);
		   				padding: 0.4rem 1.2rem 0rem;
		   				border-radius: 0.3rem;
		   				font-size: 1.3rem;
		   				height: 2.8rem;
		   				line-height: normal;
		   				background: $primary-blue;
		   				
		   				.v-button-wrap {
		   					padding: 0 12px;
		   				}
	    			}
	    			.edit-btn {
	    				&.v-navbar-quickmenu-button {
	    					@include icomoon;
	    					padding: 0rem;
	    					height: 4rem;
	    					width: 4rem;
	    					background-color: transparent;
	    					border: none;
	    					text-align: center;
	    					line-height: 4rem;
	    					border-radius: 0px;
	    					@include transition-with-prefix (transform 0.3s ease);
	    					@include transform (rotate(90deg));
	    					
	    					&:before {
								content: "\e61b";
								font-size: 2rem;
								display: block;
		    				}
		    				&.expanded {
		    					@include transform (rotate(0deg));
		    				}
		    				&:active {
		    					background-color: $primary-focus-blue;
		    				}
	    				}
	    			}
	    			.save-btn {
	    				padding: 0.4rem 0 0;
	    				top: 6px;
	    				right: 6px;
	    			}
	    			.add-btn {
	    				top: 0px;
	    				right: 0px;
	    				.v-button-wrap {
	    					padding: 0rem 1rem;
	    					
	    					.v-button-caption:before {
	    						@include icomoon;
								content: "\e114";
								font-size: 2.2rem;
								line-height: 4rem;
								color: rgb(255, 255, 255);
	    					}
	    				}
    					
    					&.v-navbar-quickmenu-button {
	    					@include icomoon;
	    					padding: 0rem 1.2rem;
	    					
	    					&:before {
								content: "\e60e";
								font-size: 2rem;
		    				}
	    				}
	    				
	    			}
	    		}
	    	}
	    	
	    	.v-touchkit-navview-wrapper {
				-webkit-tap-highlight-color: transparent;
				& > div {
					position: absolute;
					top: 0px;
					left: 0px;
					right: 0px;
					bottom: 0px;
				}
	    	}
	    	
	    	.v-touchkit-navview-toolbar {
	    		@include toolbar;
	    		height: auto;
	    		
		    	.v-mobileview-toolbar {
	    			.v-mobileview-toolbar-prevBtn, .v-mobileview-toolbar-nextBtn {
	    				color: rgb(94, 80, 85);
	    				background-color: rgba(187, 187, 187, 0.6);
	    			}
		    	}
		    	.upload-status-wrap {
		    		background-color: $primary-blue;
		    		.v-progressbar {
		    			display: block;
		    			padding: 0.6rem;
		    			.v-progressbar-wrapper {
		    				border-color: white;
		    				.v-progressbar-indicator {
		    					background-color: white;
		    				}
		    			}
		    		}
		    		.v-label {
		    			color: white;
		    		}
		    		.upload-succeed-layout {
		    			padding: 0.5rem;
		    			.v-button.link {
		    				background-color: transparent;
		    				.v-button-caption {
		    					color: white;
		    				}
		    			}
		    		}
		    	}
		    	.comment-box {
    				padding: 0.6rem 0rem 0.6rem 0.6rem;
    				background-color: rgb(255, 255, 255);
    				height: 4.8rem !important;
    				.v-upload {
    					.v-button {
    						color: $primary-blue;
    						background-color: transparent;
    						.v-button-wrap {
    							line-height: normal;
    							.v-button-caption:before {
    								content: "\e002";
    								font-family: "icomoon";
    								font-size: 2.2rem;
    							}
    						}
    					}
    				}
    				.v-textarea {
    					padding: 0.6rem;
						border: none;
    					font-size: 1.4rem;
    					line-height: 2.2rem;
    					&.v-textarea-prompt {
    						font-style: normal;
    					}
    				}
    				.v-button.submit-btn {
    					color: $primary-blue;
    					font-weight: bold;
    					background-color: transparent;
    					border-left: 1px solid $light-gray-border;
    					border-radius: 0px;
    					.v-button-wrap {
    						font-size: 1.4rem;
    						padding: 1.1rem;
    					}
    				}
    			}
    			.related-items {
    				height: 4.8rem !important;
    			}
			}
	    }
	}
	
	/* Controls QuickMenu */
	.v-navbar-quickmenu-content {
		width: 100%;
		background-color: #252c34;
			
		.v-button {
			background-color: #515a62;
			color: #FFFFFF;
			
			.v-button-wrap {
				padding: 5px 0px;
			}
		}
		
		.v-touchkit-navbutton {
			background-color: #515a62;
			color: #FFFFFF;
			padding: 5px 0px;
			border-radius: 3px;
			text-align: center;
		}
	}
	
	/* Data List View */
	.data-list-view {
		background-color: rgb(255, 255, 255);
		.list-item {
			&.v-touchkit-navbutton {
				padding: 1rem 2.7rem 1rem 1.4rem;
				border-bottom: 0.1rem solid #DDDDDD;
				color: #8C8C8C;
				font-size: 1.3rem;
				
				&:after {
					content: "\e60a";
					font-family: "icomoon";
					line-height: 1.8rem;
					padding: 10px 0px;
					color: #8c8c8c;
					font-size: 1.1rem;
				}
			}
			&.blank-item:before {
				content: "";
				font-weight: bold;
				display: inline-block;
				width: 100%;
				vertical-align: top;
				position: relative;
			}
			&.v-button {
				text-align: left;
				margin: 0px;
				
				.v-button-wrap {
					padding: 1rem 2.7rem 1rem 1.4rem;
					word-wrap: break-word;
					white-space: normal;
					border-bottom: 1px solid #DDDDDD;
					
					.v-button-caption {
						color: #8C8C8C;
						font-size: 1.3rem;
					}
				}
				&.selectable-button.selected {
					.v-button-wrap {
						position: relative;
						
						&:after {
							content: "\e042";
							font-family: "icomoon";
							color: #49A3E1;
							position: absolute;
							right: 2rem;
							display: inline-block;
							font-size: 1.6rem;
							line-height: 1.6rem;
						}
					}
				}			
			}
			.v-button {
				text-align: left;
				margin: 0rem;
				.v-button-wrap {
					padding: 0rem;
					.v-button-caption {
						font-size: 1.3rem;
					}
				}				
			}
		}
		
	}
	
	/* Read View Layout */
	.readview-layout, .editview-layout {
		background-color: #F3F1F0;
		
		.v-label {
			font-size: 1.5rem;
			line-height: 2rem;
			
			&.h2 {
				font-size: 1.2rem;
				color: #6B6A70;
				padding: 2.0rem 0rem 0.9rem 1rem;
				border-bottom: .1rem solid $light-gray-border;
			}
		}
		
		.info-hdr {
			font-size: 1.2rem;
			color: #6B6A70;
			padding: 2.0rem 0rem 0.9rem 1rem;
			border-bottom: .1rem solid $light-gray-border;
			.v-label {
				font-size: 1.2rem;
			}
		}
		
		.v-gridlayout {
			color: #060606;
			background-color: #FFFFFF;
			
			.gridform-caption, .gridform-field {
				border-bottom: .1rem solid $light-gray-border;
				
				&.v-horizontallayout{
					&.v-margin-top {
						padding-top: 1.3rem;
					}
					&.v-margin-bottom {
						padding-bottom: 1.3rem;
					}
					&.v-margin-left {
						padding-left: 0rem;
					}
				}
			}
			
			.gridform-caption {
				.v-label.v-widget {
					text-align: right;
				}				
			}
			
			.gridform-field {
				color: #8C8C8C;
				.v-label {
					line-height: 2rem;
					font-size: 1.5rem;
					text-overflow: ellipsis;
					&.v-has-width {
						white-space: nowrap;
					}
					
					&:after {
						content: "";
						position: relative;
						display: inline-block;
					}
				}				
			}
		}
		
		.v-touchkit-verticalcomponentgroup {
			box-shadow: none;
			border-color: $light-gray-border;
			border-top: none;
			margin: 0px;
			.v-touchkit-componentgroup-row { 
				&:before {
					border-color: $light-gray-border;
					left: 0px;
					right: 0px;
				}
				.v-caption {
					margin: 1.3rem 0rem;
				}
				&.v-touchkit-componentgroup-row-full {
					& > .v-caption {
						color: $black-caption;
						text-align: right;
						line-height: 2rem;
						padding-right: 1rem;
						overflow: hidden;
					}
					& > .v-touchkit-componentgroup-cell {
						flex: 2 1 0%;
					}
				}
			}
			.v-touchkit-componentgroup-cell > * {
				margin: 1.3rem 0rem;
			}
			.v-textfield {
				height: auto;
			}
			.v-textfield:focus,
			.v-textarea:focus,
			.v-touchkit-numberfield:focus,
			.v-filterselect-input:focus {
				box-shadow: none;
			}
		}
	}

	.readview-layout {
		.gridform-field {
			.v-button-wrap {
				text-align: left;
				padding: 0px;
				.v-icon {
					vertical-align: middle;
				}
				.v-button-caption {
					vertical-align: middle;
					padding-left: 3px;
					font-size: 1.5rem;
					line-height: 2rem;
				}
			}
		}
	}
	
	/* Edit View Layout */
	
	.editview-layout {
		.v-caption {
			font-size: 1.5rem;
			
			.v-required-field-indicator {
				font-size: 1.3rem;
				line-height: 2rem;
			}
		}
		input.v-textfield, .v-filterselect, .v-textarea {
			@include editform-field;
			
			border: none;
			border-radius: 0px;
			padding: 0px 1px;
			vertical-align: top;
			margin: 0px;
		}
			
		.v-filterselect-button {
			@include icomoon;
		}
		
		.v-select {
			border: none;
			border-radius: 0px;
			background-color: transparent;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			
			select.v-select-select {
				@include editform-field;
				min-height: 2rem;
				
				option {
					padding: 0px;
				}
			}
			&:after {
				content: "\e60c";
				font-family: "icomoon";
				padding-right: 5px;
				color: #8C8C8C;
			}
		}
		.v-datefield.v-datefield-popupcalendar {
			font-size: 1.5rem;
			
			input.v-textfield.v-datefield-textfield {
				border: none;
			}
			.v-datefield-button {
				line-height: normal;
			}
		}
		
		.v-touchkit-datepicker .v-select-select {
			@include editform-field;
			
			min-height: 2rem;
		}
		
		.v-touchkit-navbutton.combo-box {
			@include editform-field;
			
			&:before {
				content: "";
				position: relative;
				display: inline-block;
			}
			&:after {
				content: "\e60a";
				font-family: "icomoon";
				color: #8c8c8c;
				font-size: 1.1rem;
				right: 0px;
				top: 0px;
			}
		}
		
		.v-upload {
			.v-button {
				font-size: 1.5rem;
				.v-button-wrap {
					padding: 0px;
				}
			}
		}
	}
	
	.attachment-panel {
		.v-label.attachment-name {
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}	
	
	/* Note List */
	.noteList {
		background-color: rgb(255, 255, 255);
	}
	
	/* Message Row */
	.message {
		border-bottom: 1px solid rgb(203, 203, 203);
		
		.message-header {
			.user-name {
				color: rgb(227, 146, 65);
			}
			.time-post {
				color: rgb(191, 191, 191);
			}
		}
		
		.message-body {
			color: rgb(149, 149, 149);
		}
	}
	
    .v-button {
        line-height: normal;
        box-shadow: none;
        padding: 0px;
        cursor: pointer;
        
        &.big-btn {
	        font-size: 1.5rem;
	
	        .v-button-wrap {
	            padding: 1rem 0rem;
	
	            .v-button-caption {
	                font-size: 1.5rem;
	            }
	        }
	    }
	    
	    &.blue {
	        background-color: #49a3e1;
	        border: 1px solid #226899;
	
	        .v-button-caption {
	            color: white;
	        }
	    }
	    
	    &.gray {
	        background-color: #9b9b9b;
	        border: 1px solid #616161;
	
	        .v-button-caption {
	            color: white;
	        }
	    }
	    
	    &:active {
	    	.v-button-wrap:after {
	    		background-color: transparent;
	    	}
    	}
    }
    
    .v-touchkit-navbutton {
        line-height: normal;
        
        &:after {
	        content: "";
	    }
    }

    .v-textfield {
        border-radius: 4px;
        border: 1px solid #c7c7c7;
        outline: none;
    }
    
    @include project-dashboard;
    @include project-activities;
    @include project-bug;
    @include project-message;
    @include project-task;
    @include project-member;
    @include project-milestone;
    @include project-timelog;
    
}